<template>
  <div class="search">
        <div class="company-search-sec">
        <el-form :inline="true" :model="formInline" :ref="searchFormName" label-position="right" label-width="120px">
            <el-row :gutter="0">
                <el-col :span="6">
                    <el-form-item label="客户名称：" prop="companyName">
                        <el-input v-model="formInline.companyName" placeholder="请输入" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="6">
                        <el-form-item label="客户类型：" prop="progress">
                            <el-select v-model="formInline.progress" placeholder="请选择" clearable>
                                <el-option
                                    v-for="item in progressOptions"
                                    :key="item.label"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                <el-col :span="6">
                    <el-form-item label="客户地址：" prop="registeredAddress">
                            <el-input v-model="formInline.registeredAddress" placeholder="请输入" clearable>
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-link :underline="false" type="primary" class="underline" @click="resetForm(searchFormName)">清除搜索</el-link>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
                    </el-form-item>
                </el-col>
                <!-- 高级搜索折叠条件 -->
                <el-col :span="2">
                    <collapse-link/>
                </el-col>
            </el-row>
            <!-- 高级搜索条件区域 start -->
            <collapse-item>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="客户联系人：" prop="registeredType">
                            <el-input v-model="formInline.registeredType" placeholder="请输入" clearable>
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </el-form-item>
                </el-col>
                  <el-col :span="6">
                        <el-form-item label="状态：" prop="status">
                            <el-select v-model="formInline.status" placeholder="请选择" clearable>
                                <el-option
                                    v-for="item in progressOption"
                                    :key="item.label"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </collapse-item>
            <!-- 高级搜索条件区域 end -->
        </el-form>
    </div>

  </div>
</template>

<script>
 // 引入折叠搜索条件组件
import collapseItem from '../../../components/searchCollapse/collapseItem.vue';
import CollapseLink from '../../../components/searchCollapse/collapseLink.vue';
   
export default {
  components: { collapseItem,CollapseLink },
   data() {
            return {
                searchFormName: 'searchForm',   // 搜索表单名称
                formInline: {
                    companyName: '',            // 客户名称
                    status: '',                 // 状态
                    registeredAddress: '',      // 客户地址
                    registeredType: '',         // 客户联系人
                    progress: ''                // 客户类型
                },
                progressOption:[{
                    value: '合作终止',
                    label: '合作终止'
                },
                {
                    value: '合作中',
                    label: '合作中'
                }
                ],
                progressOptions: [{
                    value: '顺丰速运',
                    label: '顺丰速运'
                }, {
                    value: '圆通速递',
                    label: '圆通速递'
                }, {
                    value: '龙邦速度',
                    label: '龙邦速度'
                },{
                    value: '中通快递',
                    label: '中通快递'
                },{
                    value: '申通快递',
                    label: '申通快递'
                },
                {
                    value: '百世快递',
                    label: '百世快递'
                },
                {
                    value: '韵达快递',
                    label: '韵达快递'
                },
                ],
            }
        },
        methods: {
            // 点击搜索
            onSearch() {
                console.log(this.formInline);
                console.log('点击搜索...');
            },
            // 重置搜索表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
}
</script>
<style lang="less" scoped>
    /* 搜索条件区域 */
    .company-search-sec {
        text-align: left;
        margin-top: 30px;
        /* 链接下划线 */
        .underline {
            text-decoration: underline;
        }
        /* 输入框宽度 */
        /deep/ .el-input {
            width: 180px;
        }
    }
</style>